'use strict';
let user = null;

function initAccount() {
    fetch('/api/auth/user')
        .then(response => {
            // 检查响应状态码
            if (!response.ok && (response.status < 400 && response.status >= 500)) {
                parent.layui.layer.alert(`获取用户信息出错！<br />状态码：${response.status}`);
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            // 用户未登录
            if (!response.ok) {
                layui.$('#account-action').html(`<button type="button" class="layui-btn layui-bg-blue" onclick="login()">登录</button>`);
                return false
            }
            // 解析 JSON 数据
            return response.json();
        })
        .then(data => {
            // 处理从服务器接收到的数据
            if (!data) {
                return false;
            }
            user = data;
            let username = user.username;
            let role = user.role;
            switch (role) {
                case 'ADMIN':
                    role = '管理员';
                    break;
                case 'ASKER':
                    role = '提问者';
                    break;
                default: // RESPONDER
                    role = '回答者';
            }
            layui.$('#account-info').html(`${username} - ${role}`);
            layui.$('#account-action').html(`<button type="button" class="layui-btn layui-bg-blue" onclick="logout()">注销</button>`);
            if (role === '管理员') {
                layui.$('#account-action').append(`<button type="button" class="layui-btn layui-bg-blue" onclick="operatorUser()">管理用户</button>`);
            }
        })
        .catch(error => {
            layui.layer.msg('因网络原因获取用户信息失败！');
            console.error('Error:', error);
        });
}

function showQuestion(questions) {
    layui.table.render({
        elem: '#question-table',
        cols: [[ //标题栏
            {field: 'title', title: '标题', width: '100%', sort: true}
        ]],
        data: questions,
        //skin: 'line', // 表格风格
        //even: true,
        page: true, // 是否显示分页
        limits: [5, 10, 15],
        limit: 10 // 每页默认显示的数量
    });
    layui.table.on('row(question-table)', function (obj) {
        let data = obj.data;
        layui.$("#answer-iframe").attr("src", `/question-answer?id=${data.id}`);
        changeURLStatic('id', data.id);
    });
}

function initQuestion() {
    let questionId = getQueryVariable("id");
    if (questionId !== null) {
        layui.$("#answer-iframe").attr("src", `/question-answer?id=${questionId}`);
    } else {
        layui.$("#answer-iframe").attr("src", `/question-answer`);
    }
    let titleLike = getQueryVariable("title");
    let url = `/api/question`;
    if (titleLike !== null && titleLike !== '') {
        document.getElementById('search-title-input').value = titleLike;
        url += `/title-like/${titleLike}`;
    }
    fetch(url)
        .then(response => {
            // 检查响应状态码
            if (!response.ok) {
                parent.layui.layer.alert(`获取问题列表出错！<br />状态码：${response.status}`);
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            showQuestion(data);
            initSearchTitle();
            initAddQuestion();
        })
        .catch(error => {
            layui.layer.msg('因网络原因，获取问题列表失败！');
            console.error('Error:', error);
        });
}

function initSearchTitle() {
    // 提交事件
    layui.form.on('submit(search-title)', function (data) {
        let titleLike = data.field.title; // 获取表单字段值
        if (titleLike
            === '') {
            titleLike = null;
        }
        changeURLStatic('title', titleLike);
        let url = `/api/question`;
        if (titleLike !== null && titleLike !== '') {
            url += `/title-like/${titleLike}`;
        }
        fetch(url)
            .then(response => {
                // 检查响应状态码
                if (!response.ok) {
                    parent.layui.layer.alert(`获取问题列表出错！<br />状态码：${response.status}`);
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                showQuestion(data);
            })
            .catch(error => {
                layui.layer.msg('因网络原因，获取问题列表失败！');
                console.error('Error:', error);
            });
        return false; // 阻止默认 form 跳转
    });
}

function initAddQuestion() {
    document.getElementById('question-add').onclick = function () {
        if (!user) {
            parent.layui.layer.alert(`当前您未登录，登陆后才能提出问题！`);
            return;
        }
        if (user.role !== "ASKER" && user.role !== "ADMIN") {
            parent.layui.layer.alert(`当前用户没有权限提出问题！`);
            return;
        }
        parent.layer.open({
            title: "新增问题",
            type: 2,
            area: ['80%', '80%'],
            content: '/question-edit',
            // title: false, // 不显示标题栏
            closeBtn: 1,
            fixed: true, // 固定
            // resize: false, // 不允许调整大小
            shadeClose: true,
            shade: [0.1, '#16baaa'], // 遮罩
            anim: "slideDown" // 动画从上边缘往下
        })
    };
}

document.addEventListener('DOMContentLoaded', () => {
    layui.use(function () {
        initAccount();
        initQuestion();
    });
});

// 登录
function login() {
    layer.open({
        type: 2,
        id: "login-iframe",
        hideOnClose: true,
        area: ['24rem', '15rem'],
        content: '/login',
        title: false, // 不显示标题栏
        closeBtn: 1,
        fixed: true, // 固定
        resize: false, // 不允许调整大小
        shadeClose: true,
        shade: [0.1, '#16baaa'], // 遮罩
        anim: "slideDown" // 动画 从上边缘往下
    });
}

// 注销
function logout() {
    fetch('/api/auth/logout')
        .then(response => {
            // 检查 HTTP 响应是否成功 (status code 在 200-299 之间)
            if (!response.ok) {
                layui.layer.msg(`注销失败，状态码：${response.status}`);
            }
            layer.alert(`注销成功`, {
                time: 3 * 1000,
                success: function(layero, index){
                    let timeNum = this.time/1000;
                    let setText = function(start){
                        parent.layer.title('<span class="layui-font-red">'+ (start ? timeNum : --timeNum) + '</span> 秒后自动刷新', index);
                    };
                    setText(!0);
                    this.timer = setInterval(setText, 1000);
                    if(timeNum <= 0) clearInterval(this.timer);
                },
                end: function(){
                    clearInterval(this.timer);
                    // 注销成功，刷新页面
                    window.location.reload();
                }
            });
        })
        .catch(error => {
            layui.layer.msg('因网络原因，注销失败！');
            console.error('Error:', error);
        });
}

function operatorUser() {
    if (!user) {
        parent.layui.layer.alert(`当前您未登录，登陆后才能管理用户！`);
        return;
    }
    if (user.role !== "ADMIN") {
        parent.layui.layer.alert(`当前用户没有权限管理用户！`);
        return;
    }
    parent.layer.open({
        id: "user-iframe",
        title: "用户管理",
        type: 2,
        area: ['80%', '80%'],
        content: '/user',
        // title: false, // 不显示标题栏
        closeBtn: 1,
        fixed: true, // 固定
        // resize: false, // 不允许调整大小
        shadeClose: true,
        hideOnClose: true,
        shade: [0.1, '#16baaa'], // 遮罩
        anim: "slideDown" // 动画从上边缘往下
    })
}